<template>
  <div class="reg-box">
    <label :class="[!testPhone()?'err':'']">账号<input type="number" placeholder="请输入手机号" maxlength="11" v-model="account"></label>
    <label :class="[!testUsername()?'err':'']">昵称<input type="text" placeholder="请输入用户名" v-model="username"></label>
    <label :class="[!testPass()?'err':'']">密码<input type="password" placeholder="请输入密码" maxlength="32" v-model="password"></label>
    <!-- <label>密码<input type="password" placeholder="请再次输入密码" maxlength="32"></label> -->
    <!-- <button class="submit" type="button">立即注册</button> -->
    <mt-button type="danger" size="large" @click="reg()" :disabled="!testPhone() || !testUsername() || !testPass() ">立即注册</mt-button>
    <router-link to="/vip" tag="div" class="submit">
      <mt-button type="primary" size="large" >立即登录</mt-button>
    </router-link>

  </div>
</template>

<script>
import {Toast} from 'mint-ui'

export default {
  data(){
    return {
      account:'',
      username:'',
      password:''
    }
  },
  methods:{
    async reg(){
      let data = await this.ajax.post({
        url:'/api/reg',
        data:{
          account:this.account,
          username:this.username,
          password:this.password
        }
      })
      // Toast(data.data)
      if(data.err==0){
        Toast(data.data+"，请登录")
        this.$router.push('/user/login')
      }
    },
    testPhone(){
      return /^1(3|4|5|6|7|8|9)\d{9}$/.test(this.account)
    },
    testPass(){
      return /[0-9A-Za-z]/.test(this.password)
    },
    testUsername(){
      return this.username.trim()!=""
    }
  }
}
</script>
<style lang="less" scoped>
.reg-box{
  padding: 10px;
  label{
      display: flex;
      align-items: center;
      line-height: 50px;
      white-space: nowrap;
      background-color: #DDD;
      padding-left: 10px;
      margin:20px 0;
      border: 1px solid green;
      box-shadow: 0 0 5px green;
      border-radius: 5px;
      input{
        margin: 0;
        background-color: #DDD;
        border: none;
        color: blue;
      }
      input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
          box-shadow: 0 0 0px 1000px #DDD inset
      }
  }
  .submit{
    margin: 20px 0 ;
  }
  .err{
    border:1px solid red ;
    box-shadow: 0 0 5px red;
  }
}
</style>